<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js">
    </script>
    <style>
        .v-cloak {
            display: none;
        }
    </style>
</head>
<body>

<div id="root">
    <h2 :style="{opacity}">hello,world</h2>
    <button @click="destroy">销毁</button>
</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;

    const vm = new Vue({
        el: '#root',
        //template里面可以写html结构 但是不能写js代码 只能写html结构
        //template里面的代码会被解析成html结构 然后渲染到页面上
        /*template: ' <div  ' +
            ' <h2 :style="{opacity}">hello,world</h2>\n' +
            '    <h2>乘十后的number:<span v-ten-times="number"></span></h2>\n' +
            '    <button @click="number++">点击使number+1</button> ' +
            '</div>',*/
        data: {
            opacity: 1
        },
        methods: {
            destroy() {
                vm.$destroy()
            }
        },
        //beforeCreate()方法在实例创建完成之前调用 此时data和methods都还没有被初始化
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this)
        },
        //在实例创建完成之后调用 此时data和methods都已经被初始化
        created() {
            console.log('created')
            console.log(this)
        },
        //在实例挂载之前调用 此时el和data都已经被初始化 但是还没有被挂载到页面上
        beforeMount() {
            console.log('beforeMount')
            console.log(this)
        },
        //在实例挂载之后调用 此时el和data都已经被初始化 并且已经被挂载到页面上
        mounted() {
            //透明度变换
            this.timer = setInterval(() => {
                //透明度变换 从0慢慢变成1 再从1慢慢变成0 循环往复
                this.opacity -= 0.01
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
            }, 10)
        },
        //在数据发生变化之前调用 此时el和data都已经被初始化 并且已经被挂载到页面上
        beforeUpdate() {
            console.log('beforeUpdate')
            console.log(this)
        },
        //在数据发生变化之后调用 此时el和data都已经被初始化 并且已经被挂载到页面上
        updated() {
            console.log('updated')
            console.log(this)
        },
        //在实例销毁之前调用 此时el和data都已经被初始化 并且已经被挂载到页面上
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer)
        },
        //在实例销毁之后调用 此时el和data都已经被初始化 并且已经被挂载到页面上
        destroyed() {
            console.log('destroyed')
            console.log(this)
        },
    })

</script>
</body>

</html>